.tree-view {
    --bb-tree-padding: #{$bb-tree-padding};
    --bb-tree-margin: #{$bb-tree-margin};
    --bb-tree-padding-left: #{$bb-tree-padding-left};
    --bb-tree-item-margin: #{$bb-tree-item-margin};
    --bb-tree-icon-width: #{$bb-tree-icon-width};
    --bb-tree-check-margin: #{$bb-tree-check-margin};
    --bb-tree-node-padding: #{$bb-tree-node-padding};
    --bb-tree-item-active-color: #{$bb-tree-item-active-color};
    --bb-tree-item-active-bg: #{$bb-tree-item-active-bg};
    --bb-tree-item-hover-color: #{$bb-tree-item-hover-color};
    --bb-tree-item-hover-bg: #{$bb-tree-item-hover-bg};
    --bb-tree-icon-margin-right: #{$bb-tree-icon-margin-right};
    --bb-tree-disabled-opacity: #{$bb-tree-disabled-opacity};
    --bb-tree-search-height: #{$bb-tree-search-height};
    --bb-tree-item-bg-radius: var(--bs-border-radius);
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;

    .tree-search {
        padding-bottom: .5rem;
    }

    .tree-root {
        padding: var(--bb-tree-padding);
        margin: var(--bb-tree-margin);
        position: relative;
        flex: 1;
        min-height: 0;
        height: 1%;
    }

    .tree-content {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        cursor: pointer;

        .tree-content-header {
            flex-basis: calc(var(--bb-tree-padding-left) * var(--bb-tree-view-level, 0));
            flex-shrink: 0;
        }

        .tree-content-body {
            display: flex;
            flex-wrap: nowrap;
            flex-grow: 1;
            flex-shrink: 0;
            align-items: center;
            border-radius: var(--bs-border-radius);
        }

        .node-icon {
            width: 18px;
            height: 18px;
            transition: transform .3s linear;
            display: flex;
            align-items: center;
            justify-content: center;
            visibility: hidden;

            &.disabled {
                opacity: var(--bb-tree-disabled-opacity);
            }
        }

        .node-loading {
            display: none;
            visibility: visible;
        }

        .show {
            .node-icon {
                transform: rotate(90deg);
            }
        }

        &.loading {
            .node-icon {
                display: none;
            }

            .node-loading {
                display: flex;
            }
        }

        .form-check {
            margin: var(--bb-tree-check-margin);
        }

        &:not(.disabled) {
            &.active {
                .tree-content-body {
                    color: var(--bb-tree-item-active-color);
                    background-color: var(--bb-tree-item-active-bg);
                }
            }

            &:hover {
                .tree-content-body {
                    color: var(--bb-tree-item-hover-color);
                    background-color: var(--bb-tree-item-hover-bg);
                }
            }
        }

        &:not(:last-child) {
            margin-bottom: 1px;
        }
    }

    .tree-node {
        display: inline-flex;
        align-items: center;
        padding: var(--bb-tree-node-padding);
        flex: 1;

        .tree-icon {
            width: var(--bb-tree-icon-width);
            text-align: center;
            margin-inline-end: var(--bb-tree-icon-margin-right);
        }

        .tree-node-text {
            white-space: nowrap;
        }

        &.disabled {
            opacity: var(--bb-tree-disabled-opacity);
        }
    }
}
